<template>
  <div class="login">
    <div class="login_top">
      <div><img :src="loginTop" alt="登录顶部图片" class="login-top-img"></div>
    </div>
    <div class="top_line"></div>
    <div class="loginmain">
      <div class="login_left">
        <div class="login_left_title">大力弘扬中医药传统文化——传承精华 守正创新</div>
        <div class="login_left_list">
          <div class="login_left_box">
            <div class="list_img" style="margin-left: 1.375rem;"><img :src="sourceImg" width="24" height="24"></div>
            <div class="list_title">中医药文化资源</div>
          </div>
          <div class="login_left_box login_list_center">
            <div class="list_img" style="margin-left: 0.75rem;"><img :src="Knowledge" width="24" height="24"></div>
            <div class="list_title">中医药健康知识角</div>
          </div>
          <div class="login_left_box">
            <div class="list_img" style="margin-left: 0.75rem;"><img :src="Expo" width="24" height="24"></div>
            <div class="list_title">中医药数字博览会</div>
          </div>
        </div>
      </div>
      <div class="loginmainl">
        <div>
          <div class="login-title">内容创作与全媒体传播</div>
        </div>
         <div class="logintype">
          <div class="logiintypeitem" :class="{ 'active': active == item.id }" v-for="(item, index) in navlist"
            :key="index" @click="changetype(item)">
            {{ item.name }}
          </div>
        </div>
        <el-form class="login-form" ref="loginFormm" :model="loginFormm" :rules="loginRuless">
          <el-form-item prop="phoneNumber">
            <el-input v-model="loginFormm.phoneNumber" type="text" auto-complete="off" placeholder="请输入您的手机号">
              <svg-icon slot="prefix" icon-class="phone" color="#D5A771" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaEnabled">
            <el-input v-model="loginFormm.code" auto-complete="off" placeholder="请输入图形验证码" style="width: 15.625rem"
              @keyup.enter.native="handleLoginn">
              <template slot="prefix">
                <img :src="Verification" width="20px" height="20px" class="prefix-icon">
              </template>
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode()" class="login-code-img" />
            </div>
          </el-form-item>
          <el-form-item prop="smsCode">
            <el-input v-model="loginFormm.smsCode" auto-complete="off" placeholder="请输入短信验证码"
              @keyup.enter.native="handleLoginn">
              <template slot="prefix">
                <img :src="Verification" width="20px" height="20px" class="prefix-icon">
              </template>
              <template slot="suffix">
                <div @click="getSmsCode" class="sms-code-btn">{{ computeTime > 0 ?
                  ` ${computeTime}s 已发送` :
                  '获取验证码' }}</div>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item class="login_box">
            <el-button :loading="loadingg" size="medium" type="primary" class="login-btn" @click.native.prevent="handleLoginn">
              <span v-if="!loadingg">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <div class="wechat_login" @click="getweimadeng()">
              <img :src="wechatImg" class="wechat-img">
              <div class="wechat_tips">使用微信扫码登录</div>
            </div>
            <div class="wangji">
              <div class="zhuce">登录即代表您已同意 <span class="policy-link" @click="$router.push({ path: '/yinsi' })">《隐私政策》</span>和<span class="policy-link" @click="$router.push({ path: '/fuwuxieyi' })">《服务条款》</span></div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="el-login-footer"></div>
  </div>
</template>

<script>
import { getCodeImg, getcode, getweima } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login720",
  data() {
    return {
      loginTop: require('@/assets/images/login_top.png'),
      Verification: require('@/assets/images/Verification_code.png'),
      userTitle: require('@/assets/images/user_title.png'),
      wechatImg: require('@/assets/images/wechat@2x.png'),
      sourceImg: require('@/assets/images/source.png'),
      Knowledge: require('@/assets/images/Knowledge Corner@2x.png'),
      Expo: require('@/assets/images/Expo@2x.png'),
      computeTime: 0,
      timer: null,
      codeUrl: "",
      loginFormm: {
        phoneNumber: "",
        sendType: "smsLogin",
        code: "",
        uuid: "",
        smsCode: ""
      },
       navlist: [
        { name: "验证码登录", id: "1" },
      ],
      active: "1",
      loginRules: {},
      loginRuless: {
        phoneNumber: [
          { required: true, trigger: "blur", message: "请输入您的手机号" }
        ],
        smsCode: [{ required: true, trigger: "blur", message: "请输入您的验证码" }]
      },
      loading: false,
      loadingg: false,
      captchaEnabled: true,
      register: true,
      redirect: undefined,
      isSmsLogin: false,
      openid: ""
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.openid = this.$route.query.openId
    if (this.openid) {
      this.gettoken()
    }
    this.getCode();
  },
  methods: {
    goBeiAn() {
      window.location.href = 'https://beian.miit.gov.cn/'
    },
    getweimadeng() {
      getweima({}).then(res => {
        window.location.href = res.data
      })
    },
    getSmsCode() {
      if (!this.computeTime) {
        if (this.loginFormm.phoneNumber) {
          getcode(this.loginFormm).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '验证码已发送',
                type: 'success'
              });
              this.computeTime = 60;
              this.timer = setInterval(() => {
                this.computeTime--;
                if (this.computeTime <= 0) {
                  clearInterval(this.timer)
                }
              }, 1000);
            }
          })
        } else {
          this.$message({
            message: '请输入手机号',
            type: 'danger'
          });
        }
      }
    },
    getCode(type) {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginFormm.uuid = res.uuid
        }
      });
    },
    gettoken() {
      let obj = {
        phoneNumber: "",
        sendType: "",
        code: "",
        uuid: "",
        smsCode: "",
        openId: this.openid
      }
      this.$store.dispatch("wLogin", obj).then(() => {
        this.$router.push({ path: "/" }).catch(() => {
        });
      }).catch((res) => {
      });
    },
    handleLoginn() {
      let msg = ""
      if (this.loginFormm.phoneNumber) {
        if (this.loginFormm.smsCode) {
        } else {
          msg = "请输入验证码"
          this.$message({
            message: msg,
            type: 'warning'
          });
        }
      } else {
        msg = "请输入手机号"
        this.$message({
          message: msg,
          type: 'warning'
        });
      }

      if (msg == "") {
        this.loadingg = true;
        this.$store.dispatch("Login", this.loginFormm).then(() => {
          this.$router.push({ path: this.redirect || "/" }).catch(() => {
          });
        }).catch((res) => {
          this.computeTime = 0
          this.loginFormm.code = ""
          this.loginFormm.smsCode = ""
          this.getCode()
          clearInterval(this.timer)
          this.loadingg = false;
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* 基础字体设置 */
html {
  font-size: 16px;
}

/* 150%缩放适配 */
@media screen and (min-resolution: 144dpi) {
  html {
    font-size: 14px;
  }
  
  .loginmain {
    transform: scale(0.65);
    transform-origin: center top;
  }
}
</style>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  // min-height: 1080px;
  background-image: url("../../../assets/images/background.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .login_top {
   // margin: 1.25rem auto 0;
    padding-left: 2.5rem;
    
    .login-top-img {
      width: auto;
      max-width: 29.8125rem;
      height: auto;
      max-height: 3.375rem;
    }
  }

  .top_line {
    width: 100%;
    height: 1px;
  //  background-color: red;
    margin-top: .3125rem;
    box-sizing: border-box;
    border: 1px solid #fff;
  }

  .loginmain {
    display: flex;
    justify-content: center;
   // align-items: center;
    flex-wrap: wrap;
   // padding: 2vh 0;
   padding-top: 3.0rem;
   // width: 100%;
    box-sizing: border-box;

    .login_left {
      margin-right: 16rem;
      max-width: 40vw;
      
      .login_left_title {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 2rem;
        color: #000000;
        line-height: 1.5;
        white-space: nowrap;
      }

      .login_left_list {
        margin-top: 1.875rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
        .login_left_box {
          display: flex;
          width: 13.6875rem;
          height: 3.5rem;
          padding: 0.9375rem 0;
          border: 1px solid #D5A771;
          border-radius: 0.25rem;
          align-items: center;
          
          .list_img {
            display: inline-flex;
            align-items: center;
          }

          .list_title {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 1.25rem;
            color: #463F37;
            margin-left: 0.625rem;
            text-align: left;
            white-space: nowrap;
            padding-right: .8rem;
          }
        }

        .login_list_center {
          margin: 0 1.25rem;
        }
      }
    }

    .loginmainl {
      width: 30rem;
      min-width: 480px;
      height: auto;
      min-height: 38.5rem;
      background: #FFFFFF;
      box-shadow: 0px 0px 0.625rem 0px rgba(213, 167, 113, 0.2);
      border-radius: 0.625rem;
      padding-top: 2.5rem;
      box-sizing: border-box;
        .logintype {
       // width: 200px;
        display: flex;
        justify-content: center;
        //  margin-left: 40px;
        //  margin-top: 25px;
        // margin-bottom: 36px;
        margin: auto auto 25px auto;

        .logiintypeitem {
          cursor: pointer;
          width: 105px;
          font-size: 20px;
          line-height: 40px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          color: #999999;
        }

         .active {
          color: #000;
          border-bottom: 1px solid #000;
          font-weight: bold;
        }
      }
      .login-title {
       // margin-top: 2.5rem;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 1.75rem;
        color: #000000;
        text-align: center;
      }

      .login-form {
        padding: 0 2.5rem;
        margin: 0 auto;
        
        .login-code {
          width: 8.75rem;
          height: 2.375rem;
          float: right;
          
          .login-code-img {
            height: 3.125rem;
            width: auto;
            cursor: pointer;
          }
        }
      }

      .login_box {
        margin-top: 3rem;
        
        .login-btn {
          width: 100%;
          background-color: #D5A771;
          border-color: #D5A771;
          height: 3.125rem;
          font-size: 1rem;
        }

        .wechat_login {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-top: 3.125rem;
          cursor: pointer;
          
          .wechat-img {
            width: 2.5rem;
            height: 2.5rem;
          }

          .wechat_tips {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 0.75rem;
            line-height: 0.75rem;
            margin-top: 0.375rem;
            color: #909090;
            text-align: center;
            margin-top: 20px;
          }
        }

        .wangji {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 0.875rem;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          color: #999999;
          text-align: center;
          margin-top: 0.625rem;
          
          .zhuce {
            line-height: 1.5;
           // padding-top: 20px;
          }
          
          .policy-link {
            cursor: pointer;
            color: #D5A771;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  
  .el-login-footer {
    height: 3rem;
  }
}

/* 表单元素样式 */
::v-deep .el-form-item {
  margin-bottom: 1.875rem;
}

::v-deep .el-input__inner {
  padding-left: 2.5rem !important;
  height: 3.125rem !important;
  font-size: 1rem;
  background-color: #F4F4F4;
  border: 1px solid #D8D8D8;
}

::v-deep .el-input__prefix {
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 100%;
  
  .input-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .prefix-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
  }
}

::v-deep .el-input__suffix {
  right: 0.9375rem;
  
  .sms-code-btn {
    color: #D5A771;
    padding-top: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    &:hover {
      opacity: 0.8;
    }
  }
}


</style>